<template>
    <!--首页导航-->
        <nav class="msite_nav">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"  
              v-for='(items,index ) in filterArr' 
              :key='index'>
                <a href="javascript:" class="link_to_food"
                v-for='(item) in items' :key="item.id"
                >

                  <div class="food_container">
                    <img  v-bind:src="imgBaseUrl+item.image_url">
                  </div>
                  <span>{{item.title}}</span>
                </a>
               
              </div>
              
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </nav>
</template>

<script>

// 1引入我们的swiper插件 
  import Swiper from 'swiper'


 //2 swiper  css  
 import 'swiper/css/swiper.min.css'


export default {
  props:['categorys'],
  name: '',
  data () {
    return {

      imgBaseUrl: 'https://fuss10.elemecdn.com'
    }
  },

  computed: {
      //  bigArr  17条  []  =>[[8],[8],[1]]
      // categorysArr 
      filterArr(){
          // let {categorys}=this;
          // console.log(categorys)
          let categorys=this.categorys;
          let minArr=[];
          let bigArr=[];

          categorys.forEach(v=>{
            if(minArr.length==8) {
                minArr=[]
            }
            if(minArr.length==0) {
                bigArr.push(minArr)    //[[]]
            }
            minArr.push(v)
          })

          console.log(bigArr)
          return bigArr





        
      }

                           

    
  },
  methods: {},
  mounted() {
    	//dom才可以拿到dom的数据

 
  

          
  },

  watch: {
    filterArr(newVal,oldVal) {
      if(newVal) {
         
          this.$nextTick(function(){
              var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项
                
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
              })   
          })
            
         
      }
    }
    
  },
}
</script>

<style scoped  lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixins.styl'
.msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
              width 100%
              height 100%
              .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                  display flex
                  justify-content center
                  align-items flex-start
                  flex-wrap wrap
                  .link_to_food
                    width 25%
                    .food_container
                      display block
                      width 100%
                      text-align center
                      padding-bottom 10px
                      font-size 0
                      img
                        display inline-block
                        width 50px
                        height 50px
                    span
                      display block
                      width 100%
                      text-align center
                      font-size 13px
                      color #666
              .swiper-pagination
                >span.swiper-pagination-bullet-active
                  background #02a774
          .msite_shop_list
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff
            .shop_header
              padding 10px 10px 0
              .shop_icon
                margin-left 5px
                color #999
              .shop_header_title
                color #999
                font-size 14px
                line-height 20px
            .shop_container
              margin-bottom 50px
              
</style>